<template>
  <div class="layout">
    <Layout :style="{minHeight: '100vh'}" v-if="user.username==='admin'">
      <Sider collapsible :collapsed-width="78" v-model="isCollapsed">
        <Menu active-name="1-1" theme="dark" width="auto" :class="menuitemClasses">
          <MenuItem name="1-1" to="adduser">
            <Icon type="ios-navigate"></Icon>
            <span >读者管理</span>
          </MenuItem>
          <MenuItem name="1-2" to="/Book" >
            <Icon type="ios-book" />
            <span>图书管理</span>
          </MenuItem>
          <MenuItem name="1-3" to="/borrowing">
            <Icon type="md-contacts" />
            <span>借阅管理</span>
          </MenuItem>
          <MenuItem name="1-4" to="/BookType">
            <Icon type="ios-appstore" />
            <span>类型管理</span>
          </MenuItem>
          <MenuItem name="1-5" to="/announcement">
            <Icon type="ios-leaf" />
            <span>公告管理</span>
          </MenuItem>
        </Menu>
      </Sider>
      <Layout>
        <Header :style="{background: '#ffffff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}">
          <Row>
            <Col span="22" > </Col>
            <Col style="left: 95%" span="2">
              <div style="cursor:pointer;">
                <Dropdown placement="bottom-start">
                  <a href="javascript:void(0)">
                    <Icon type="ios-contact"/>
                    {{ user.name }}
                    <Icon type="ios-arrow-down">
                    </Icon>
                  </a>
                  <DropdownMenu slot="list">
                    <DropdownItem @click.native="personal">个人信息</DropdownItem>
                    <DropdownItem>修改密码</DropdownItem>
                    <DropdownItem @click.native="logout">退出登录</DropdownItem>
                  </DropdownMenu>
                </Dropdown>
              </div>
            </Col>
          </Row>
        </Header>
        <Content :style="{padding: '0 0px 0px 0px'}">
          <Card>
            <div style="height: 630px">
                    <router-view></router-view>
            </div>
          </Card>
        </Content>
      </Layout>
    </Layout>


<!--    <Layout :style="{minHeight: '100vh'}" v-else>
      <Sider collapsible :collapsed-width="78" v-model="isCollapsed">
        <Menu active-name="1-1" theme="dark" width="auto" :class="menuitemClasses">
          <MenuItem name="1-1" to="/booklist">
            <Icon type="ios-book" />
            <span>图书列表</span>
          </MenuItem>
          <MenuItem name="1-2" to="/Library" >
            <Icon type="md-contacts" />
            <span>借阅管理</span>
          </MenuItem>
          <MenuItem name="1-3" to="/affche" >
            <Icon type="ios-leaf" />
            <span>公告</span>
          </MenuItem>
        </Menu>
      </Sider>
      <Layout>
        <Header :style="{background: '#ffffff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}">
          <Row>
            <Col span="22" > </Col>
            <Col style="left: 95%" span="2">
              <div style="cursor:pointer;">
                <Dropdown placement="bottom-start">
                  <a href="javascript:void(0)">
                    <Icon type="ios-contact"/>
                    {{user.name}}
                    <Icon type="ios-arrow-down">
                    </Icon>
                  </a>
                  <DropdownMenu slot="list">
                    <DropdownItem >个人信息</DropdownItem>
                    <DropdownItem>修改密码</DropdownItem>
                    <DropdownItem @click.native="logout">退出登录</DropdownItem>
                  </DropdownMenu>
                </Dropdown>
              </div>
            </Col>
          </Row>
        </Header>
        <Content :style="{padding: '0 0px 0px 0px'}">
          <Card>
            <div style="height: 630px">
              <router-view></router-view>
            </div>
          </Card>
        </Content>
      </Layout>
    </Layout>-->
  </div>
</template>

<script>
import {login} from "@/api/user";

export default {
name: "Index",
  data () {
    return {
      theme3: "dark",
      isCollapsed: false
    }
  },
  computed: {
    menuitemClasses () {
      return [
        'menu-item',
        this.isCollapsed ? 'collapsed-menu' : ''
      ]
    },
    user(){
      return this.$store.state.user
    }
  },
  methods: {
    logout(){
    this.http.post("/logout").then(res=>{
      if (res.data){
        sessionStorage.removeItem("user")
        this.$router.push("/login")
        window.location.reload()
      }
    })
    },
    personal(){
      this.$router.push("/personal")
    }
  },
  created() {

  }

}

</script>

<style scoped>
.layout-con{
  height: 100%;
  width: 100%;
}
.menu-item span{
  display: inline-block;
  overflow: hidden;
  width: 69px;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  transition: width .2s ease .2s;
}
.menu-item i{
  transform: translateX(0px);
  transition: font-size .2s ease, transform .2s ease;
  vertical-align: middle;
  font-size: 16px;
}
.collapsed-menu span{
  width: 0px;
  transition: width .2s ease;
}
.collapsed-menu i{
  transform: translateX(5px);
  transition: font-size .2s ease .2s, transform .2s ease .2s;
  vertical-align: middle;
  font-size: 22px;
}
.me-item{
  right: 90%;
}
</style>
